<template>
  <div class="box box-body">
    <div v-if="searchbar">
      <el-input :id="name" v-model="filterText"
                placeholder="模糊搜索" size="small" style="max-width: 360px;"
                prefix-icon="fa fa-search" clearable></el-input>
    </div>
    <el-tree ref="tree" node-key="id" :data="list"
             :filter-node-method="filterNode" @check="onNodeClick"
             accordion show-checkbox check-on-click-node
             :expand-on-click-node="false">
    </el-tree>
  </div>
</template>

<script>
/* eslint-disable */
import Layers from "@/lang/layers";
import Bamboo from "@/lang/bamboo";
import {InputType} from "@/lang/fast-form";

/**
 * 树形选择器
 */
export default {
    name: 'SmartCheckTree'
    , components: {}
    , inject: ['fast_form']
    , props: {
        // 字段名
        name: {type: String}
        // 默认值
        , value: {type: [String, Array], default: Layers.array}
        // 数据字典
        , options: {type: Array, default: undefined}
        // 文字提示
        , placeholder: {type: String, default: ''}
        // 搜索栏
        , searchbar: {type: Boolean, default: false}

        // 请求参数
        , where: {type: Object, default: undefined}
        // 异步获取函数
        , provider: {type: Function, default: undefined}
    }, data() {
        return {
            // 值模型，任何时候都不允许为空，避免 vue 联动失效
            valueModel: undefined
            // fast-form 表单接口
            , input: undefined
            // 属性数据列表
            , list: undefined
            // 过滤数值
            , filterText: ''
            // 展示搜索栏
            , showSearchbar: false
        }
    }, watch: {
        value: {
            handler: function (val) {
                this.input.setFormatValue(val);
            }
        }
        , options: {
            handler: function (val) {
                this.setOptions(val)
            }
        }
        , where: {
            handler: function (val) {
                this.reload();
            }
        }
        /**
         * 数据过滤
         */
        , filterText(val) {
            this.$refs.tree.filter(val);
        }
    },
    created() {
        let input = this.fast_form.getFormInput(this.name);

        // 覆盖重写默认的函数
        input.wrap(InputType.CheckTree);

        input.setDom(this);
        this.input = input;

        if (Layers.isNotBlank(this.options)) {
            // 下拉数据选项
            this.setOptions(this.options);
        } else if (Layers.isNotBlank(this.provider)) {
            // 查询远程数据字典
            this.reload();
        }

        // 首次渲染数据 & 触发数据联动
        input.setFormatValue(this.value);
    }, methods: {

        /**
         * 用户输入变换事件
         * @param val
         */
        onChange: function (val) {
            this.input.changeValue(val);
        }
        /**
         * 数据受控函数，数据发生变化的时候，会通知到当前组件
         *
         * @see FastForm
         * @param val
         */
        , onChangeValue: function (val) {
            this.valueModel = val;
        }
        /**
         * 过滤数据
         */
        , filterNode: function (value, data) {
            if (!value) return true;
            return data.label.indexOf(value) !== -1;
        }
        /**
         * 节点点击事件
         * @param node
         */
        , onNodeClick(node) {
            let nodes = this.$refs.tree.getCheckedNodes();
            this.onChange(Bamboo.getIds(nodes));
        }
        /**
         * 设置新的值
         */
        , setOptions: function (val) {
            this.list = Bamboo.isTree(val) ? val : Bamboo.toTree(val);
        }
        /**
         * 查询远程数据字典
         */
        , reload: function () {
            // 使用异步加载函数
            this.loading = true;
            this.provider(this.where).then(list => {
                this.options_ = list;
            }).finally(()=> {
                this.loading = false;
            });
        }
    }
};
</script>
